<template>
  <div>
    <h2>i am store</h2>
    {{ appName }} -- {{ school }} -- {{ stateValue }}
    <b>{{appVersion}}</b>
    <input @input="change" v-model="number" />
    <button @click="go">go</button>
    <ul>
      <li v-for="(value,index) in todos" :key="index">{{value}}</li>
    </ul>
    <button @click="registerModule">动态注册模块</button>
    <hr>
    {{userNames}}
    <button @click="changeUser">改变user模块值</button>
    <button @click="getInfo">发送请求</button>
    <hr>
    <img :src="url" alt="">
  </div>
</template>
<script>
import { getUserInfo } from '@/api/user'
import { mapState, mapGetter, mapMutations, mapActions } from 'vuex'
export default {
  name: 'store',
  data() {
    return {
      inputValue: '',
      number: 123,
      url: ''
    }
  },
  computed: {
    ...mapState({
      appName: state => state.appName,
      school: state => state.school,
      stateValue: state => state.stateValue,
      appVersion: state => state.appVersion,
      todos:state => state.todo ? state.todo.todoList:[],
      userNames: state => state.user.userName
    }),
    
  },
  methods: {
    ...mapMutations([
      'SET_STATE_VALUE',
      'SET_USER_NAME'
    ]),
    ...mapActions([
      'updateAppName',
      'newName'
    ]),
    changeUser(){
      this.SET_USER_NAME("哈哈改变了")
      this.$axios.get("/api/json.php")
                    .then(response=>{
                        console.log(response);
                        alert(1);
                    })
                    .catch(error=>{
                        console.log(error);
                    })
    },
    change(){
      this.SET_STATE_VALUE(this.number)
    },
    go(){
      this.newName()
    },
    registerModule(){
      // todo 是动态添加的模块名
      this.$store.registerModule('todo',{
        state:{
          todoList: [
            'xixi1',
            'haha2'
          ]
        }
      })
      console.log('asd',this.todos);
    },
    getInfo(){
      getUserInfo({ userId: 21 }).then(res => {
        this.url = res.data[0].img
        console.log(res)
      })
    }
  }
}
</script>
<style>

</style>


